<template>
  <view>
    <!-- 购物车商品列表 -->
    <view class="goodsList">
      <!-- 组件：商品项 -->
      <GoodsItem
        v-for="item in goodsList"
        :key="item.goods_id"
        :item="item"
      ></GoodsItem>

      <!-- 空容器 -->
      <u-empty
        v-if="goodsList.length === 0"
        text="购物车里空空如也，请先去添加商品吧"
        mode="car"
        margin-top="350"
        font-size="35"
      ></u-empty>
    </view>

    <!-- 购物车底部 -->
    <view class="cartBottom u-flex">
      <u-checkbox
        shape="circle"
        :value="isAllChecked"
        active-color="red"
        @input="toggleAllChecked"
        >全选</u-checkbox
      >
      <view class="totalPrice u-flex-1">
        合计：<text class="price">￥{{ totalPrice }}</text></view
      >
      <view class="submitBtn" @click="toOrder"
        >去结算({{ totalGoodsNumber }})
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
import GoodsItem from './components/GoodsItem.vue';
export default {
  components: {
    GoodsItem,
  },
  computed: {
    ...mapState('cart', ['goodsList']),
    ...mapGetters('cart', ['isAllChecked', 'totalGoodsNumber', 'totalPrice']),
  },
  methods: {
    ...mapMutations('cart', ['toggleAllChecked']),
    toOrder() {
      if (this.totalGoodsNumber > 0) {
        uni.navigateTo({ url: '/pages/order/order' });
      } else {
        uni.showToast({
          title: '没有商品',
          icon: 'error',
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.goodsList {
  padding: 0 34rpx 100rpx;
}
.cartBottom {
  padding: 34rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fdfdfd;
  border: 1px #aea9a9 solid;
  .totalPrice {
    font-weight: bolder;
    font-size: 26rpx;
    margin-left: 15rpx;
    .price {
      font-weight: bolder;
      font-size: 32rpx;
      color: red;
    }
  }
  .submitBtn {
    background: orangered;
    line-height: 52rpx;
    padding: 0 26rpx;
    border-radius: 26rpx;
    color: white;
    font-size: 32rpx;
    height: 52rpx;
  }
}
</style>
